<template>
	<view class="map">
		 <map 
			:longitude="lng" 
			:latitude="lat"
			scale="14"
			:markers="markers"
			show-location
			style="width: 100%; height: 300px;">
		</map>
		<view class="container">
			<view v-for="(item,index) in list" :key="index" :class="active === item.username?'active':'address'" @click="selectAddress(item)">
				<view style="display: flex;align-items: center;width: 100%;">
					<img style="width: 25px;height: 25px;margin-right: 10px;" src="@/static/dingwei1.png" alt="">
					<view style="width: calc(100% - 35px);">
						<view style="margin-bottom: 10px;display: flex;justify-content: space-between;">
							<view style="font-weight: bold;">{{item.store_name}}</view>
							<view style="font-size: 12px;white-space: nowrap;">距您{{item.distance}}</view>
						</view>
						<view style="font-size: 12px;">{{item.province+item.city+item.district+item.detail}}</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;width: 100%;margin-top: 15px;">
					<img style="width: 20px;height: 20px;margin-right: 15px;" src="@/static/shijian.png" alt="">
					<view style="width: calc(100% - 35px);font-size: 12px;">
						{{item.open_left}} - {{item.open_right}}
					</view>
					<view @click="toMap(item)" style="font-size: 12px;white-space: nowrap;margin-right: 10px;">
						<img style="width: 20px;height: 20px;" src="@/static/daohang.png" alt="">
					</view>
				</view>
				<div class="checkmark-box" v-if="active === item.username">
				  <img style="width: 10px;height: 10px;transform: rotate(-45deg)" src="@/static/dui.png" alt="">
				</div>
			</view>
		</view>
		<view class="submit">
			<view class="submitBtn" @click="goBack">去下单</view>
		</view>
	</view>
</template>

<script>
	import { stores } from '@/api/home.js'
	export default{
		data() {
			return {
				markers: [],
				list:[],
				active:'',
				lat:0,
				lng:0
			}
		},
		onLoad(options) {
			// if(options.active) this.active = options.active
			stores(JSON.parse(options.data)).then(res=>{
				let mark = []
				res.data.map((item,index)=>{
					mark.push({
						id: index+1,
						latitude: Number(item.lat),
						longitude: Number(item.lng),
						width: 20,
						height: 30
					})
					item.distance = Math.ceil(item.distance)>1000?(Math.ceil(item.distance) / 1000).toFixed(2)+'km':Math.ceil(item.distance)+'米'
				})
				this.markers = mark
				if(!options.active && res.data[0]) {
					this.active = res.data[0].username
					this.lng = Number(res.data[0].lng)
					this.lat = Number(res.data[0].lat)
				}
				this.list = res.data
			})
		},
		methods:{
			toMap(item){
				uni.openLocation({
					latitude: Number(item.lat),//纬度
					longitude: Number(item.lng),//经度
					name: item.store_name,
					address: item.detail
				});
			},
			goBack(params){
				let obj = this.list.find(item=>{return item.username === this.active})
				uni.$emit('dataFromBack', obj)
				uni.navigateBack({
				    option: 1,
				});
			},
			selectAddress(item){
				this.lat = Number(item.lat)
				this.lng = Number(item.lng)
				this.active = item.username
			}
		}
	}
</script>

<style scoped>
	.submit{
		width: calc(100% - 20px);
		background-color: #fff;
		border-radius: 4px;
		padding: 10px;
		margin-left: 10px;
		box-sizing: border-box;
	}
	.submitBtn{
		background-color: #2c6cf4;
		color: #fff;
		text-align: center;
		border-radius: 4px;
		padding: 10px;
	}
	.map{
		height: 100vh;
		overflow: hidden;
	}
	.container{
		height: calc(100vh - 370px);
		padding: 10px;
		box-sizing: border-box;
		overflow-y: auto;
	}
	.active{
		padding: 10px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 4px;
		margin-bottom: 10px;
		border: 1px solid #2c6cf4;
		position: relative;
		overflow: hidden;
	}
	.address{
		/* display: flex; */
		/* justify-content: space-between; */
		padding: 10px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 4px;
		margin-bottom: 10px;
		border: 1px solid #fff;
		position: relative;
		overflow: hidden;
	}
	.checkmark-box{
		position: absolute;
		z-index: 100;
		background-color: #2c6cf4;
		width: 30px;
		height: 30px;
		right: -15px;
		bottom: -15px;
		transform: rotate(45deg)
	}
</style>